<template>
  <el-card class="module-info-card" shadow="never">
    <template #header>
      <div class="card-header">
        <div class="flex-between ">
          <div class="flex">
            <el-avatar :icon="getModuleIcon(moduleInfo)" :size="32" class="mr-3"></el-avatar>
            <h2 class="text-xl font-bold">{{ moduleInfo.name }}</h2>
          </div>
          <div>
            <el-button type="primary" @click="showEditDialog" class="mr-2" v-if="hasEditPermission">编辑</el-button>
            <el-button type="danger" @click="handleDeleteModule" class="mr-2" v-if="hasEditPermission">删除</el-button>
            <el-text v-if="!hasEditPermission" class="mr-2">
              <el-icon>
                <InfoFilled />
              </el-icon>
              没有编辑权限，只能发布服务
            </el-text>
            <el-button @click="goBack" class="return-btn">返回广场</el-button>
          </div>
        </div>
      </div>
    </template>
    <div class="flex items-start h-full flex-col">
      <div class="flex-1 w-full">
        <el-descriptions border :column="2" class="module-info-descriptions">
          <el-descriptions-item label="描述" class="description-item">
            <el-tooltip :content="moduleInfo.description" placement="top" :show-after="200" max-width="400"
              :enterable="false">
              <div class="description-content">
                {{ moduleInfo.description }}
              </div>
            </el-tooltip>
          </el-descriptions-item>
          <el-descriptions-item v-if="moduleInfo.version" label="版本">
            {{ moduleInfo.version }}
          </el-descriptions-item>
          <el-descriptions-item label="标签">
            <div class="flex flex-wrap">
              <el-tag v-for="tag in moduleInfo.tags" :key="tag" size="small" class="mr-1 tag-item">{{ tag }}</el-tag>
              <!-- <el-tag size="small" :type="moduleInfo.is_hosted ? 'success' : 'primary'" class="tag-item">
                {{ moduleInfo.is_hosted ? '托管' : '本地' }}
              </el-tag> -->
              <el-tag size="small" type="info" class="tag-item">
                {{ moduleInfo.tools_count }} 个工具
              </el-tag>
            </div>
          </el-descriptions-item>
          <el-descriptions-item v-if="moduleInfo.author" label="作者">
            {{ moduleInfo.author }}
          </el-descriptions-item>
          <el-descriptions-item v-if="moduleInfo.creator_name" label="创建者">
            {{ moduleInfo.creator_name }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag size="small" :type="moduleInfo.is_public ? 'success' : 'danger'">
              {{ moduleInfo.is_public ? '公开' : '私有' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ moduleInfo.created_at }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ moduleInfo.updated_at }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import { useRouter } from 'vue-router'
import type { McpModuleInfo } from '@/api/type/mcp-square'

const props = defineProps<{
  moduleInfo: McpModuleInfo
  hasEditPermission: boolean
}>()

const emit = defineEmits<{
  (e: 'showEditDialog'): void
  (e: 'deleteModule'): void
}>()

const router = useRouter()

// 根据模块类型获取图标
function getModuleIcon(module: McpModuleInfo) {
  // 根据模块类型或名称返回不同的图标
  if (!module?.name) return 'Tools'

  if (module.name.toLowerCase().includes('tavily')) {
    return 'Search'
  } else if (module.name.toLowerCase().includes('fetch')) {
    return 'Link'
  } else if (module.name.toLowerCase().includes('github')) {
    return 'Platform'
  } else {
    return 'Tools'
  }
}

// 返回列表页
function goBack() {
  router.push('/mcp/marketplace')
}

// 显示编辑对话框
function showEditDialog() {
  emit('showEditDialog')
}

// 处理删除模块
function handleDeleteModule() {
  emit('deleteModule')
}
</script>

<style scoped>
.module-info-card {
  border-radius: 0px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(235, 235, 235, 0.8);
  transition: all 0.3s ease;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff, #f8fcff);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.module-info-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-2px);
}

.description-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  max-height: 3em;
}

.module-info-descriptions :deep(.el-descriptions__cell) {
  min-width: 100px;
  max-width: 50%;
  word-break: break-word;
}

.module-info-descriptions :deep(.el-descriptions__label) {
  width: 15%;
}

.module-info-descriptions :deep(.el-descriptions__content) {
  width: 85%;
}

.module-info-meta {
  background: rgba(245, 250, 255, 0.7);
  padding: 16px;
  border-radius: 12px;
  width: 100%;
  border: 1px solid rgba(220, 240, 255, 0.8);
  margin-top: auto;
}

.module-meta-item {
  margin-bottom: 10px;
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.module-meta-item:last-child {
  margin-bottom: 0;
}

.module-meta-item strong {
  color: #303133;
  margin-right: 8px;
  min-width: 70px;
}

.return-btn {
  border-radius: 8px;
  transition: all 0.2s ease;
}

.tag-item {
  border-radius: 20px;
  padding: 0 12px;
  height: 24px;
  line-height: 22px;
  margin-right: 8px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.tag-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
</style>